<template>
   <div class="cnyzs-nav" :class="{ HeadterStyle: navBarFixed }">
      <div class="nav-m">
         <div class="nav-m-left">
            <!-- LOGO -->
            <div class="logo">
               <nuxt-link to="/">
                  <h1 :style="{ backgroundImage: `url('${cnyzs.COMMON_LOGO}')` }">
                     AOIR
                  </h1>
               </nuxt-link>
            </div>
            <!-- 导航 -->
            <div class="navlist">
               <ul>
                  <li v-for="(item, index) in cnyzs.COMMON_TITLE_NAV" :class="{ navActive: navActive === index }"
                     @click="navActive = index; getUserNotificationNumber()">
                     <nuxt-link :to="item.path" :target="item.target">
                        {{ item.name }}
                     </nuxt-link>
                     <div class="decorate"></div>
                  </li>
               </ul>
            </div>
         </div>
         <div class="nav-m-right">
            <!-- 用户 -->
            <div class="info" v-if="userinfo._id">
               <ClientOnly>
                  <el-popover :width="300">
                     <template #reference>
                        <div class="useravatar" @click="() => navigateTo('/Author/' + userinfo.id)">
                           <el-image style="width: 100%; height: 100%" :src="userinfo.useravatar" fit="cover" />
                        </div>
                     </template>
                     <div class="user-info-box">
                        <div class="profile-photo-name">
                           <div class="left">
                              <div class="image" @click="Utils.viewAuthor(userinfo.id)">
                                 <el-image style="width: 100%; height: 100%" :src="userinfo.useravatar" fit="cover" />
                              </div>
                              <div class="name-title">
                                 <div class="left-name">
                                    <h2 @click="Utils.viewAuthor(userinfo.id)">{{ userinfo.username }}</h2>
                                 </div>
                                 <div class="left-title" @click="openMoney = true">
                                    <span class="iconfont icon-qianbao5"></span>
                                    <span class="wallet">{{ userinfo?.money || 0 }}</span>
                                    <!-- <span class="number" @click="openMoney = true">充值</span> -->
                                 </div>
                              </div>
                           </div>
                           <div class="right">
                              <div class="outlogin" @click="outlogin">
                                 <span class="iconfont icon-quit"></span>
                              </div>
                           </div>
                        </div>
                        <div class="info-box">
                           <div class="user-lv">
                              <div class="user-lv-top">
                                 <div class="lv-last">Lv.1</div>
                                 <div class="progress">
                                    <div class="pgs"></div>
                                 </div>
                                 <div class="lv-next">Lv.2</div>
                              </div>
                              <div class="user-lv-bottom">
                                 <span>当前成长10，距离升级Lv.2还需要290</span>
                              </div>
                           </div>
                           <div class="info-follow-fans">
                              <div class="follow-fans-item">
                                 <span class="number">23</span>
                                 <span class="name">关注</span>
                              </div>
                              <div class="follow-fans-item">
                                 <span class="number">85</span>
                                 <span class="name">粉丝</span>
                              </div>
                              <div class="follow-fans-item">
                                 <span class="number">12</span>
                                 <span class="name">内容</span>
                              </div>
                           </div>
                           <div class="info-vip" @click="openMoney = true">
                              <div class="vip-text">
                                 <span>成为大会员</span>
                                 <span>了解更多权益</span>
                              </div>
                              <div class="vip-btn">
                                 <div class="btn">立即开通</div>
                              </div>
                           </div>
                           <div class="info-options">
                              <ul>
                                 <li @click="Utils.viewAuthor(userinfo.id)">
                                    <div class="item-left">
                                       <span class="iconfont icon-wode"></span>
                                       <span>个人中心</span>
                                    </div>
                                    <div class="item-right">
                                       <span class="iconfont icon-jiantou-copy"></span>
                                    </div>
                                 </li>
                                 <li>
                                    <div class="item-left">
                                       <span class="iconfont icon-tubiao207"></span>
                                       <span>我的口袋</span>
                                    </div>
                                    <div class="item-right">
                                       <span class="iconfont icon-jiantou-copy"></span>
                                    </div>
                                 </li>
                                 <li>
                                    <div class="item-left">
                                       <span class="iconfont icon-xitongshezhi"></span>
                                       <span>账号设置</span>
                                    </div>
                                    <div class="item-right">
                                       <span class="iconfont icon-jiantou-copy"></span>
                                    </div>
                                 </li>
                              </ul>
                           </div>
                        </div>
                     </div>
                  </el-popover>
               </ClientOnly>
               <div class="Online" :class="{ ToBeConnected: !ToBeConnected }" title="已成功接入实时通讯频道">
                  <span class="iconfont icon-biaoqiankuozhan_paihang-123"></span>
                  <span class="text">{{ ToBeConnected ? '在线' : '等待连接' }}</span>
               </div>
               <ClientOnly>
                  <div class="message">
                     <div v-if="unreadTotal" class="message-unread-number" @click="() => navigateTo('/message')">
                        {{ unreadTotal }}
                     </div>
                     <span class="iconfont icon-xiaoxi7" @click="() => navigateTo('/message')"></span>
                     <!-- <el-popover :width="300">
                           <template #reference>
                              <nuxt-link to="/message" target="_blank" style="padding: 20px 0;">
                                 <span class="iconfont icon-xiaoxi7"></span>
                              </nuxt-link>
                           </template>
                           <div class="message-popover">
                              <div class="popover-content">
                                 <div v-if="unreadTotal" class="content">
                                    132
                                 </div>
                                 <el-empty v-else :image-size="80" description="没有消息" />
                              </div>
                              <div class="popover-btn">
                                 <div class="btn">
                                    <span class="iconfont icon-saoba"></span>
                                    <span>清空消息</span>
                                 </div>
                                 <div class="btn" @click="gomessage">
                                    <span>更多消息</span>
                                    <span class="iconfont icon-jiantou-copy"></span>
                                 </div>
                              </div>
                           </div>
                        </el-popover> -->
                  </div>
               </ClientOnly>
            </div>
            <!-- 搜索 -->
            <div class="sousuo">
               <span class="iconfont icon-sousuo1"></span>
               <input type="text" placeholder="全站搜索" @keyup.enter="">
            </div>
            <!-- VIP -->
            <div class="vip" style="">
               <img style="width: 100%; height: 100%;"
                  src="https://alan-1252409695.cos.ap-guangzhou.myqcloud.com/images%2F%E4%BC%9A%E5%91%985.png" alt="">
               <ClientOnly>
                  <el-popover :width="350">
                     <template #reference>
                        <div class="l"></div>
                     </template>
                     <div class="vip-popover">
                        <div>1563153</div>
                        <div>1563153</div>
                        <div>1563153</div>
                        <div>1563153</div>
                        <div>1563153</div>
                        <div>1563153</div>
                        <div>1563153</div>
                        <div>1563153</div>
                     </div>
                  </el-popover>
               </ClientOnly>
            </div>
            <!-- 登录 -->
            <div v-if="!userinfo._id" class="info-home" @click="openLogin = true">
               <span>登录</span>
            </div>
         </div>
      </div>
   </div>
   <div style="height: 85px;"></div>
</template>
<script lang="ts" setup >
import { storeToRefs } from 'pinia';
const { cnyzs, openLogin, openMoney } = storeToRefs(cnyzsCommonpinia())
const { userinfo, unreadTotal } = storeToRefs(cnyzsUserpinia())
const { getUserNotificationNumber } = cnyzsUserpinia()
const { outlogin } = cnyzsUserpinia()
const navActive = ref(-1)
const route = useRoute()
// 处理导航选中状态
watch(() => route.fullPath, (newValue, oValue) => {
   const index = cnyzs.value.COMMON_TITLE_NAV.findIndex((v: any) => v.path === newValue)
   navActive.value = index
})
cnyzs.value.COMMON_TITLE_NAV.forEach((v: any, index: number) => {
   if (v.path === route.fullPath) {
      navActive.value = index
   }
})
const ToBeConnected = ref(true)



// 监听往下滚动隐藏/往上滚动显示 
const navBarFixed = ref(false)
const navBarFixed2 = ref(false)
const oldScrollTop = ref(0)
onMounted(() => window.addEventListener("scroll", watchScroll2)) // 监听滚动事件
const show = ref(true)
const show2 = ref(true)
const watchScroll2 = () => {
   // return
   if (show.value) {
      show.value = false
      // 滚动条距文档顶部的距离
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      // 滚动条滚动的距离
      let scrollStep = scrollTop - oldScrollTop.value;
      // 判读滚动方向 200 ms 后执行
      oldScrollTop.value = scrollTop;
      // 更新——滚动前，滚动条距文档顶部的距离
      if (scrollStep < 0) {
         navBarFixed.value = false
         navBarFixed2.value = true
         show.value = true
         setTimeout(() => {
            show2.value = true
         }, 0)
      } else {
         if (show2.value) {
            show2.value = false
            navBarFixed2.value = false
            setTimeout(() => {
               show.value = true
               navBarFixed.value = true
               show2.value = true
            }, 0)
         }
      }
   }
}

</script>
<style lang="scss" scoped>
.HeadterStyle {
   position: fixed;
   top: -70px !important;
}

.cnyzs-nav {
   position: fixed;
   top: 0;
   z-index: 100;
   width: 100%;
   height: 70px;
   background-color: #FFF;
   box-shadow: 0px 5px 40px 0px rgba(17, 58, 93, .1);
   display: flex;
   justify-content: center;
   transition: all .3s ease-in-out;

   .nav-m {
      width: 1300px;
      display: flex;
      justify-content: space-between;
      background: url('https://cos.alanoneup.com/one_header.png') no-repeat 50% center / 1400px;

      .nav-m-left {
         display: flex;

         .logo {
            display: flex;
            align-items: center;
            margin-right: 25px;
            cursor: pointer;

            h1 {
               height: 35px;
               width: 135px;
               font-size: 27px;
               position: relative;
               display: flex;
               align-items: center;
               background-size: contain;
               background-position: center;
               background-repeat: no-repeat;
               padding: 20px;
               font-size: 48px;
               -webkit-text-fill-color: transparent;

               img {
                  height: 100%;
               }
            }
         }

         .navlist {
            display: flex;
            align-items: center;

            ul {
               height: 100%;
               display: flex;
               align-items: center;

               li {
                  height: 100%;
                  padding: 0 18px;

                  position: relative;
                  box-shadow: 0 0 2px rgba(0, 0, 0, 0);

                  a {
                     width: 100%;
                     height: 100%;
                     cursor: pointer;
                     display: flex;
                     align-items: center;
                  }

                  .decorate {
                     position: absolute;
                     bottom: 0;
                     left: 50%;
                     transform: translateX(-50%);
                     height: 3px;
                     width: 0%;
                     border-radius: 3px;
                     background-color: var(--aoir-color-primary);
                     opacity: 0;
                     transition: all .3s ease-in-out;
                  }


                  &:hover {
                     box-shadow: 0 0 2px rgba(0, 0, 0, .1);

                     .decorate {
                        width: 100%;
                        opacity: 1;
                     }
                  }
               }

               .navActive {
                  box-shadow: 0 0 2px rgba(0, 0, 0, .1);
                  color: var(--aoir-color-primary);
                  transition: all .1s ease-in-out;

                  .decorate {
                     width: 100%;
                     opacity: 1;
                  }
               }
            }
         }
      }

      .nav-m-right {
         display: flex;
         align-items: center;

         .iconfont {
            font-size: 19px;
            font-weight: 600;
            color: #444;
         }

         .vip {
            width: 23px;
            height: 23px;
            margin-left: 25px;
            transform: translateY(-2px);
            cursor: pointer;
            position: relative;

            .l {
               position: absolute;
               transform: translateY(20%);
               bottom: -50%;
               left: 0;
               width: 100%;
               height: 170%;
            }
         }


         .publish {
            cursor: pointer;
            margin-left: 20px;
            padding: 7px 12px;
            background: var(--aoir-color-primary);
            color: #FFF;
            font-size: 14.5px;
            // border-radius: var(--aoir-border-radius);
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all .3s;

            &:hover {
               opacity: .8;
            }

            &:active {
               transform: translateY(2px);
            }

            .iconfont {
               font-size: 16px;
               font-weight: 700;
               color: #FFF;
               margin-right: 10px;
            }
         }

         .sousuo {
            position: relative;
            margin-left: 25px;

            input {
               width: 290px;
               height: 38px;
               border: 0;
               font-size: 16px;
               background-color: #FFF;
               border-radius: 4px;
               caret-color: var(--aoir-color-primary-2);
               padding: 0 10px 0 38px;
               border-radius: 50px;
               box-shadow: 0 0 35px 0 rgb(108 108 108 / 10%);

               &::placeholder {
                  color: #CCD0DB;
               }
            }

            .iconfont {
               position: absolute;
               left: 10px;
               top: 50%;
               transform: translateY(-50%);
               // font-weight: 600;
               color: #444;
            }
         }

         .info {
            display: flex;
            align-items: center;
            justify-content: flex-end;

            .message {
               position: relative;
               cursor: pointer;
               margin-left: 25px;

               .message-unread-number {
                  position: absolute;
                  top: -50%;
                  right: -70%;
                  border-radius: 100px;
                  background-color: red;
                  border: 1.5px solid #ffffff94;
                  -webkit-animation: breathe 1500ms ease infinite;
                  -moz-animation: breathe 1500ms ease infinite;
                  -o-animation: breathe 1500ms ease infinite;
                  animation: breathe 1500ms ease infinite;
                  font-size: 12px;
                  font-weight: 900;
                  padding: 0 5px;
                  color: #FFF;

                  @-webkit-keyframes breathe {
                     0% {
                        opacity: .2;
                        box-shadow: 0 1px 10px rgba(255, 255, 255, 0.1)
                     }

                     100% {
                        opacity: 1;
                        box-shadow: 0 1px 40px rgba(255, 107, 132, 0.5)
                     }

                     50% {
                        opacity: 1;
                        box-shadow: 0 1px 80px #ff6b84
                     }
                  }

                  @-moz-keyframes breathe {
                     0% {
                        opacity: .2;
                        box-shadow: 0 1px 10px rgba(255, 255, 255, 0.1)
                     }

                     100% {
                        opacity: 1;
                        box-shadow: 0 1px 40px rgba(255, 107, 132, 0.5)
                     }

                     50% {
                        opacity: 1;
                        box-shadow: 0 1px 80px #ff6b84
                     }
                  }

                  @-o-keyframes breathe {
                     0% {
                        opacity: .2;
                        box-shadow: 0 1px 10px rgba(255, 255, 255, 0.1)
                     }

                     100% {
                        opacity: 1;
                        box-shadow: 0 1px 40px rgba(255, 107, 132, 0.5)
                     }

                     50% {
                        opacity: 1;
                        box-shadow: 0 1px 80px #ff6b84
                     }
                  }

                  @keyframes breathe {
                     0% {
                        opacity: .2;
                        box-shadow: 0 1px 10px rgba(255, 255, 255, 0.1)
                     }

                     100% {
                        opacity: 1;
                        box-shadow: 0 1px 40px rgba(255, 107, 132, 0.5)
                     }

                     50% {
                        opacity: 1;
                        box-shadow: 0 1px 80px #ff6b84
                     }
                  }
               }

            }

            .Online {
               margin-left: 10px;
               display: flex;
               align-items: center;

               .text {
                  font-size: 15px;
                  font-weight: 600;
                  color: #646464;
               }

               .iconfont {
                  font-size: 25px;
                  margin: 0 5px 0 0;
                  color: #4caf8d;
                  text-shadow: 0 0 30px #4caf8d;
                  margin-left: 5px;
               }
            }

            .ToBeConnected {
               .iconfont {
                  color: #ff9800;
                  text-shadow: 0 0 30px #ff9800;
               }
            }

            .useravatar {
               height: 58px;
               width: 58px;
               border-radius: 50%;
               cursor: pointer;
               margin-left: 15px;
               padding: 10px;

               .el-image {
                  border-radius: 50%;
               }

               .user-info-box {
                  width: 100%;
                  padding: 20px;
                  height: 500px;
                  background-color: var(--aoir-color-primary);
               }
            }
         }

         .info-home {
            margin-left: 30px;
            background-color: var(--aoir-color-primary);
            border: 0;
            box-shadow: 4px 4px 20px rgba(255, 255, 255, 0.194);
            color: #fdfdfd;
            cursor: pointer;
            display: flex;
            align-items: center;
            font-size: 14px;
            font-weight: 600;
            height: 32px;
            justify-content: center;
            margin-right: 15px;
            padding: 0 14px;
            transition: all 0.2s;
            border-radius: var(--aoir-border-radius);

            &:hover {
               opacity: .8;
            }

            &:hover {
               opacity: 0.8;
            }

            &:active {
               transform: translateY(5px);
            }

            .jia {
               // font-size: 22px;
               margin-right: 7px;
               background-color: #EEE;
               border-radius: 50%;
               width: 25px;
               height: 25px;
               color: var(--aoir-color-primary);
               color: rgb(108 112 136);
               text-align: center;
               line-height: 25px;
            }

            span {
               display: inline-block;
            }
         }
      }
   }
}


// 用户信息盒子
.el-popper.is-light {

   .user-info-box {
      background: url('https://cos.alanoneup.com/one_header.png') no-repeat;

      .profile-photo-name {
         display: flex;
         align-items: flex-start;
         ;
         justify-content: space-between;
         padding: 20px 20px 10px;

         .left {
            flex: 1;
            display: flex;

            .image {
               width: 38px;
               height: 38px;
               border-radius: 50%;
               margin-right: 15px;
               overflow: hidden;

               .el-image {
                  border-radius: 50%;
               }
            }

            .name-title {
               .left-name {
                  h2 {
                     font-size: 17px;
                  }
               }

               .left-title {
                  display: flex;
                  align-items: center;
                  margin-top: 4px;
                  cursor: pointer;

                  .iconfont {
                     margin-right: 10px;
                     color: #f35f03;
                  }

                  span {
                     color: #999;
                  }

                  .number {
                     color: #00bcd4;
                     margin-left: 15px;
                     cursor: pointer;

                     &:hover {
                        opacity: .7;
                     }
                  }

               }
            }
         }

         .right {
            display: flex;
            // justify-content: center;
            align-items: center;

            .outlogin {
               width: 37px;
               height: 37px;
               border-radius: 7px;
               background-color: rgb(65, 65, 65);
               display: flex;
               justify-content: center;
               align-items: center;
               cursor: pointer;
               color: #FFF;
               transition: all .1s ease-in-out;

               &:hover {
                  opacity: .8;
                  background-color: #e3e3e3;
                  color: var(--aoir-color-primary);
               }

               span {
                  font-size: 20px;
                  font-weight: 900;
               }
            }
         }
      }

      .info-box {
         width: 100%;
         padding: 10px 20px 20px;

         .user-lv {
            margin-bottom: 10px;

            .user-lv-top {
               display: flex;
               align-items: center;
               justify-content: space-between;
               padding: 0 2px;

               .progress {
                  flex: 1;
                  height: 5px;
                  border-radius: 20px;
                  background-color: #f0f0f0;
                  margin: 0 12px;
                  position: relative;

                  .pgs {
                     position: absolute;
                     left: 0;
                     width: 10%;
                     height: 100%;
                     background-color: #4caf8d;
                     border-radius: 20px;
                  }
               }

               .lv-last {
                  padding: 2px 5px;
                  border-radius: 4px;
                  background-color: #eeeeee;
                  font-size: 12px;
                  font-weight: 900;
               }

               .lv-next {
                  padding: 2px 5px;
                  border-radius: 4px;
                  background-color: #fff0b2;
                  font-size: 12px;
                  font-weight: 900;
               }
            }

            .user-lv-bottom {
               margin-top: 5px;
               display: flex;
               justify-content: center;

               span {
                  font-size: 12px;
                  color: #c7c7c7;
               }
            }
         }

         .info-follow-fans {
            margin: 15px 0;
            display: flex;
            justify-content: space-around;
            align-items: center;

            .follow-fans-item {
               display: flex;
               flex-direction: column;
               align-items: center;
               justify-content: center;
               transition: all .2s;

               .number {
                  font-weight: 600;
                  font-size: 17px;
                  color: #333;
                  transition: all .2s;
               }

               .name {
                  font-size: 13px;
                  color: #AAA;
                  transition: all .2s;
               }

               &:hover {
                  cursor: pointer;

                  .number,
                  .name {
                     color: var(--aoir-color-primary);
                  }
               }
            }

         }

         .info-vip {
            width: 100%;
            border-radius: 10px;
            background-color: #f2f2f28f;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 15px;
            cursor: pointer;

            .vip-text {
               display: flex;
               flex-direction: column;

               span {

                  &:nth-child(1) {
                     color: #da2e2e;
                     font-weight: 600;
                     font-size: 14.5px;
                  }

                  &:nth-child(2) {
                     color: #9f9f9f;
                     font-size: 13px;
                  }
               }
            }

            .vip-btn {
               .btn {
                  padding: 9px 14px;
                  border-radius: 7px;
                  background-color: #FFF;
                  font-size: 13px;
                  font-weight: 900;
                  color: #da2e2e;
               }
            }
         }

         .info-options {
            width: 100%;

            ul {
               width: 100%;

               li {
                  width: 100%;
                  height: 40px;
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  margin-bottom: 5px;
                  padding: 7px 10px;
                  border-radius: 10px;
                  transition: all .2s ease-in-out;

                  &:nth-last-child(1) {
                     margin: 0;
                  }

                  .item-left {
                     flex: 1;
                     display: flex;
                     align-items: center;

                     span {
                        &:nth-child(1) {
                           margin-right: 15px;
                           font-size: 18px;
                           font-weight: 900;
                           color: var(--aoir-color-primary);
                        }

                        &:nth-child(2) {
                           font-size: 15px;
                        }
                     }

                  }

                  .item-right {
                     span {
                        display: block;
                        transform: rotate(90deg);
                        font-size: 13px;
                        font-weight: 900;
                        color: #444;
                     }

                  }


                  &:hover {
                     background: #E3E5E7;
                     cursor: pointer;
                  }
               }
            }
         }

      }

   }

   .vip-popover {
      padding: 20px;
      // margin-top: 10px;
      // box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12) !important;
      // border: 1px solid #e4e7ed;
      // background-color: #FFF;
      // border-radius: 10px;
   }

   .message-popover {
      display: flex;
      flex-direction: column;
      padding: 20px;

      .popover-content {
         flex: 1;
         min-height: 200px;

         // .content {}
      }

      .popover-btn {
         display: flex;
         justify-content: space-between;

         .btn {
            flex: 1;
            height: 40px;
            background-color: #F8F8F8;
            border-radius: 7px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            font-size: 15px;
            color: #555;
            transition: all .2s ease-in-out;

            &:nth-child(1) {
               margin-right: 10px;
            }

            .iconfont {
               font-size: 16px;
               font-weight: 900;
               margin-right: 8px;
            }

            .icon-jiantou-copy {
               margin-right: 0px;
               margin-left: 4px;
               font-weight: 400;
               display: block;
               transform: rotate(90deg);
               font-size: 18px;
               color: #777;
            }


            &:hover {
               background-color: #E3E5E7;

               // .icon-jiantou-copy {
               //    color: var(--aoir-color-primary);
               // }
            }

         }
      }
   }

}
</style>